<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>

    <!-- CSS -->
    <link rel="stylesheet" th:href="@{assets/material/material.blue_grey-blue.min.css}">
    <link rel="stylesheet" th:href="@{assets/material/material.icons.css}">
    <link rel="stylesheet" th:href="@{assets/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/login.css}">

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" th:href="@{assets/ico/favicon.ico}">

    <script th:if="${bot_detection_plugin == 'google-recaptcha-v3-am-bot-detection'}" th:src="${'https://www.google.com/recaptcha/api.js?render=' + bot_detection_configuration.siteKey}"></script>

</head>

<body>
    <div class="mdl-layout mdl-js-layout">
        <div class="login-container">
            <div class="login-form">
                <div class="login-form-title">
                    <label>Sign in</label>
                    <span>to continue to <span th:text="${domain.name}"></span></span>
                </div>
                <form id="form" role="form" th:action="${action}" th:if="${!hideLoginForm}" method="post">
                    <div class="login-form-content">
                        <div class="input-textfield">
                            <label for="username">Username</label>
                            <input type="text" id="username" name="username"
                                   th:value="${identifierFirstLoginEnabled ? param.username : ''}" autofocus="autofocus" required
                                   th:readonly="${identifierFirstLoginEnabled}"
                            />
                        </div>
                        <div class="input-textfield">
                            <label for="password">Password</label>
                            <input type="password" id="password" name="password" required />
                        </div>
                        <div th:if="${error}" class="login-error-info">
                            <span>
                                <span class="error" th:text="${error}"></span>
                                <small class="error_description" th:text="*{error_description}?: 'Wrong user or password'"></small>
                            </span>
                        </div>
                    </div>

                    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                    <input type="hidden" th:name="client_id" th:value="${param.client_id}"/>

                    <input type="hidden" th:if="${bot_detection_plugin == 'google-recaptcha-v3-am-bot-detection'}"
                           th:id="${bot_detection_configuration.get('tokenParameterName')}"
                           th:name="${bot_detection_configuration.get('tokenParameterName')}" />

                    <div class="login-form-actions">
                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Sign in</button>
                    </div>
                    <div class="login-form-additional-actions">
                        <div th:if="${identifierFirstLoginEnabled}">
                            <a th:href="${backToLoginIdentifierAction}">Switch account</a>
                        </div>
                        <div th:if="${allowForgotPassword}">
                            <a th:href="${forgotPasswordAction}">Forgot Password ?</a>
                        </div>
                        <div th:if="${allowRegister && !identifierFirstLoginEnabled}">
                            <a th:href="${registerAction}">No account ? Register</a>
                        </div>
                        <div  th:if="${allowPasswordless && !identifierFirstLoginEnabled}">
                            <a th:href="${passwordlessAction}">Sign in with fingerprint, device or security key</a>
                        </div>
                    </div>
                </form>
                <div th:if="${socialProviders and !socialProviders.empty}" class="social-login-buttons">
                    <div th:if="${!hideLoginForm}" class="signup-or-separator">
                        <h6 class="text">or Sign in with</h6>
                        <hr>
                    </div>
                    <div class="mdl-social-button">
                        <a th:href="${authorizeUrls.get(socialProvider.getId())}"
                           th:class="'mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect btn-' + ${socialProvider.getType()}"
                           th:each="socialProvider : ${socialProviders}">
                            <img th:if="${socialProvider.getType()} == 'franceconnect'" th:src="@{assets/images/FCboutons-10.svg}" height="70">
                            <span th:if="${socialProvider.getType()} != 'franceconnect'">
                                <i th:class="'fab fa-' + ${socialProvider.getType()}"></i> <span th:text="${socialProvider.getName()}"></span>
                            </span>
                        </a>
                    </div>
                </div>
                <div  th:if="${allowPasswordless && hideLoginForm}">
                    <a th:href="${passwordlessAction}">Sign in with fingerprint, device or security key</a>
                </div>
            </div>
        </div>
    </div>

    <!--[if lt IE 10]>
    <script th:src="@{assets/js/placeholder.js}"></script>
    <![endif]-->
    <script th:src="@{assets/material/material.min.js}"></script>
    <script th:src="@{assets/js/jquery-3.5.1.min.js}"></script>
    <script th:inline="javascript">
        $(".mdl-textfield__input").focus(function (){
            if( !this.value ){
                $(this).prop('required', true);
                $(this).parent().addClass('is-invalid');
            }
        });

        $(".mdl-button").filter(":button").click(function (event){
            /*[# th:if="${bot_detection_plugin == 'google-recaptcha-v3-am-bot-detection'}"]*/
                event.preventDefault();
                grecaptcha.ready(function() {
                  grecaptcha.execute(/*[[${bot_detection_configuration.siteKey}]]*/, {action: 'submit'}).then(function(token) {
                    $("#"+ /*[[${bot_detection_configuration.get('tokenParameterName')}]]*/ "no-name").val(token);
                    $("#form").unbind('submit').submit();
                  });
                });
            /*[/]*/

            $(this).siblings(".mdl-textfield").addClass('is-invalid');
            $(this).siblings(".mdl-textfield").children(".mdl-textfield__input").prop('required', true);
        });
    </script>

    <script th:if="${rememberDeviceIsActive && deviceIdentifierProvider == 'FingerprintJsV3Pro'}"
            th:src="@{assets/js/remember-device/fingerprintjs-v3-pro.js}"></script>
    <script th:if="${rememberDeviceIsActive && deviceIdentifierProvider == 'FingerprintJsV3Pro'}">
        loadFingerprintJsV3Pro("[[${fingerprint_js_v3_pro_browser_token}]]", "[[${fingerprint_js_v3_pro_region}]]", fp => {
            if(fp.visitorId){
                $( "#form" )
                    .append('<input type="hidden" name="deviceId" value="' + fp.visitorId + '"/>')
            }
        });
    </script>

    <script th:if="${rememberDeviceIsActive && deviceIdentifierProvider == 'FingerprintJsV3Community'}"
            th:src="@{assets/js/remember-device/fingerprintjs-v3.js}"></script>
    <script th:if="${rememberDeviceIsActive && deviceIdentifierProvider == 'FingerprintJsV3Community'}">
        loadFingerprintJsV3(fp => {
            if (fp.visitorId) {
                $("#form")
                    .append('<input type="hidden" name="deviceId" value="' + fp.visitorId + '"/>')
            }
            if (fp.components && fp.components.platform && fp.components.platform.value) {
                $("#form").append('<input type="hidden" name="deviceType" value="' + fp.components.platform.value + '"/>');
            }
        });
    </script>
</body>
</html>
